<template>
	<view class="container">
		<view class="section">
			<view class="img">
				<image mode="widthFix" :src="haibaoImg"></image>
			</view>
			<view class="qrCode">
				<image :src="qrCodeImg"></image>
			</view>
			<!-- <view class="btn">
				<image mode="widthFix" src="/static/anniu.png"></image>
			</view> -->
			<!-- <view class="btn"></view> -->
		</view>

		<!-- share弹窗 -->
		<view class="share" :class="shareClass" @touchmove.stop.prevent="discard" @tap="hideShare">
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="h1">分享到</view>
				<view class="list">
					<view class="box" @tap="WeChatFriends">
						<image src="/static/temp/wx.png"></image>
						<view class="title">
							微信好友
						</view>
					</view>
					<view class="box" @tap="circleFriends">
						<image src="/static/temp/pyq.png"></image>
						<view class="title">
							朋友圈
						</view>
					</view>
					<view class="box" @tap="shareOther">
						<image src="/static/temp/wb.png"></image>
						<view class="title">
							新浪微博
						</view>
					</view>
					<view class="box" @tap="shareOther">
						<image src="/static/temp/qq.png"></image>
						<view class="title">
							QQ
						</view>
					</view>
				</view>
				<view class="btn" @tap="hideShare">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';

	export default {
		data() {
			return {
				qrCodeImg: '',
				haibaoImg: '',
				shareClass: '', //分享弹窗css类，控制开关动画
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				var params = {

				}
				let data = await Api.apiCall('post', Api.index.userQrcode, params)
				this.qrCodeImg = data.qrcode_url
				this.haibaoImg = data.qrbaner_url
			},
			// 分享
			share() {
				this.shareClass = 'show';
			},
			hideShare() {
				this.shareClass = 'hide';
				setTimeout(() => {
					this.shareClass = 'none';
				}, 150);
			},
			WeChatFriends() {
				console.log('**********微信好友分享***********');
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.url,
					title: "牧耘郎",
					summary: "我是Jack,帮我助力一下，我发现了一个优质的农品购物平台，物美价廉。",
					imageUrl: "http://47.104.217.202/static/icon/icon.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			circleFriends() {
				console.log('**********朋友圈分享***********');
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "牧耘郎",
					summary: "我是Jack,帮我助力一下，我发现了一个优质的农品购物平台，物美价廉。",
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title: '已分享',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareOther() {
				uni.showToast({
					title: '暂未开启分享',
					duration: 2000
				});
			},
		},

	}
</script>

<style lang="scss">
	page{
		background-color: #F5DB46;
	}
	.section {
		width: 100%;
		
		.img {
			width: 100%;
			height: 1246upx;

			image {
				width: 100%;
				height: 1246upx;
			}
		}

		.qrCode {
			width: 100%;
			height: 240upx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -636upx;
			position: absolute;

			image {
				width: 196upx;
				height: 200upx;
			}
		}

		.btn {
			width: 100%;
			height: 108upx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -148upx;
			position: absolute;

			image {
				width: 568upx;
				height: 108upx;
			}
		}

		// height: 1206upx;

	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
	
		100% {
			opacity: 0;
		}
	}
	
	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}
	
		100% {
			transform: translateY(-100%);
		}
	}
	
	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}
	
		100% {
			transform: translateY(0);
		}
	}
	.share {
		display: none;
		z-index: 1000;
	
		&.show {
			display: block;
	
			.mask {
				animation: showPopup 0.15s linear both;
			}
	
			.layer {
				animation: showLayer 0.15s linear both;
			}
		}
	
		&.hide {
			display: block;
	
			.mask {
				animation: hidePopup 0.15s linear both;
			}
	
			.layer {
				animation: hideLayer 0.15s linear both;
			}
		}
	
		&.none {
			display: none;
		}
	
		.mask {
			background-color: rgba(0, 0, 0, .5);
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 11;
		}
	
		.layer {
			width: 100%;
			position: fixed;
			z-index: 12;
			padding: 0 4%;
			top: 100%;
			background-color: rgba(255, 255, 255, 0.9);
	
			.list {
				width: 100%;
				display: flex;
				padding: 10upx 0 30upx 0;
	
				.box {
					width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
	
					image {
						width: 13.8vw;
						height: 13.8vw;
					}
	
					.title {
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}
	
			.btn {
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}
	
			.h1 {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}
</style>
